<template>
    <div>
        <el-table
                ref="table"
                :data="tableData"
                stripe
                v-loading="loading"
                border
                @row-dblclick="dblClick"
                :empty-text="emptyText"
                @expand-change="expandChange"
                @selection-change="selectionChangeHandle"
                height="800"
                style="width: 100%">

            <el-table-column type="expand">
                <template slot-scope="props">
                    {{extendData(props.row)}}
                </template>
            </el-table-column>

            <el-table-column
                    type="selection"
                    align="center"
                    fixed="left"
                    width="40">
            </el-table-column>

            <el-table-column
                    type="index"
                    :index="tableIndex"
                    align="center"
                    fixed="left"
                    width="60">
            </el-table-column>

            <el-table-column
                    align="center"
                    property="level"
                    width="80"
                    label="级别">
            </el-table-column>

            <el-table-column
                    align="center"
                    property="message"
                    label="消息摘要">
            </el-table-column>

            <el-table-column
                    align="center"
                    width="100"
                    property="loggerName"
                    label="日志名称">
            </el-table-column>

            <el-table-column
                    align="center"
                    width="200"
                    property="threadName"
                    label="线程名称">
            </el-table-column>

            <el-table-column
                    align="center"
                    width="200"
                    property="callerMethod"
                    label="调用方法">
            </el-table-column>

            <el-table-column
                    align="center"
                    property="callerLine"
                    width="70"
                    label="调用行数">
            </el-table-column>

            <el-table-column
                    sortable
                    property="createTime"
                    align="center"
                    width="150"
                    label="创建日期">
                <template slot-scope="scope">
                    {{ scope.row.createTime | datetimeFormat}}
                </template>
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="60">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteHandle(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <div class="pagination">
            <el-pagination
                    @current-change="currentChangeHandle"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog title="异常栈" :visible.sync="stackDialogVisible">
            <xy-log-stack-info :logId="logId" @deleteHandle="deleteHandle"></xy-log-stack-info>
        </el-dialog>

    </div>
</template>

<script>
    import moment from 'moment';
    import xyLogStackInfo from './LogStackInfo.vue';

    /**
     *  日志列表
     * @author yangjunxiong
     * @date 2019/7/29 17:21.
     */
    export default {
        name: 'LogbackLogTable',
        mounted() {
            this.loadData();
        },
        components: {
            xyLogStackInfo
        },
        props: {
            searchParam: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data() {
            return {
                emptyText: "暂无数据",
                stackDialogVisible: false,
                total: 0,
                pageSize: 10,
                pageNo: 1,
                logId: undefined,
                loading: false,
                tableData: [],
                messageDetail: {},   //消息详情
                multipleSelection: []
            }
        },
        computed: {},
        methods: {
            /**
             * 表格索引排序
             * @author yangjunxiong
             * @date 2019/3/7 17:09
             */
            tableIndex(index) {
                if (this.pageNo <= this.total / this.pageSize) {
                    return index + this.pageSize * (this.pageNo - 1) + 1;
                }
                //重新调整当前页面重新调整
                if (this.total % this.pageSize === 0) {
                    this.pageNo = parseInt(this.total / this.pageSize);
                } else {
                    this.pageNo = parseInt(this.total / this.pageSize) + 1;
                }

                return index + this.pageSize * (this.pageNo - 1) + 1;
            },
            loadData: function (filter) {
                let params = Object.assign(this.searchParam, {
                    page: this.pageNo,
                    limit: this.pageSize
                }, filter);
                this.loading = true;

                this.$ajax.get("logback/paging", {
                    params: params
                }).then(res => {
                    this.loading = false;
                    if (res.code !== 0) {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.tableData = res.data.data;
                    this.total = res.data.count;
                });

            },
            /**
             * 打开异常栈
             */
            dblClick(row, column, event) {
                //如果双击操作栏就不要显示弹出框
                if (event.target.cellIndex === 8) {
                    return;
                } else if (event.target.innerText === '删除') {
                    //双击删除，不弹出
                    return;
                }
                this.logId = row.id;
                this.stackDialogVisible = true;
            },
            /**
             * 分页
             */
            currentChangeHandle(val) {
                this.pageNo = val;
                this.loadData();
            },
            /**
             * 【 条件批量删除 】
             **/
            selectionChangeHandlePQuery() {
                this.$ajax.delete('logback/sync_delete_query', {
                    params: this.searchParam
                }).then(res => {
                    if (res.code === 0) {
                        // this.$message.success(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },
            /**
             * 【 主键批量删除 】
             **/
            selectionChangeHandleP() {
                if (this.multipleSelection.length <= 0) {
                    this.$message.success("请勾选需要删除的数据!");
                    return;
                }
                this.$ajax.delete('logback/sync_ids/' + this.multipleSelection.map(item => item.id).join()).then(res => {
                    if (res.code === 0) {
                        // this.$message.success(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },
            selectionChangeHandle(val) {
                this.multipleSelection = val;
            },
            /**
             * 展开某一行
             */
            expandChange: function (row, expandedRows) {

                if (!(expandedRows.length >= 1)) {
                    return;
                } else if (expandedRows.length > 1) {
                    //关闭其他的展开行
                    expandedRows.forEach((val) => {
                        if (val.id !== row.id) {
                            this.$refs.table.toggleRowExpansion(val, false);
                        }
                    });
                }

                //如果数据已经存在就不去请求了
                if (this.messageDetail[row.id]) {
                    return;
                }

                this.$ajax.get('logback/detail/' + row.id).then(res => {
                    if (res.code === 0) {
                        this.$set(this.messageDetail, '' + row.id, res.data.data);
                    } else {
                        this.$message.error(res.msg);
                    }
                });

            },
            /**
             * 根据主键删除
             */
            deleteHandle(row) {
                this.$ajax.delete('logback/sync/' + row.id).then(res => {
                    if (res.code === 0) {
                        this.stackDialogVisible = false;
                        this.loadData();
                        this.$emit('deleteSuccess', row.id);
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },
            /**
             * 获取扩展行的数据
             */
            extendData: function (row) {
                return this.messageDetail[row.id] || row.message;
            },
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>